<template>
  <view class="entering-container">
    <view class="title">录入订单 </view>

    <view class="content">
      <view class="form-item">
        <view class="label">选择商品：</view>
        <view class="inputValue" v-if="!goodImgData.name">
          <!-- <input type="text" :disable="true" /> -->
          <view class="btn" @click="handlerChooseClick">选择</view>
        </view>
      </view>
      <view class="form-item">
        <view class="label">已选商品：</view>
        <view class="inputValue">
          <image :src="goodImgData.pic" mode="scaleToFill" />
          <text>{{ goodImgData.name }}</text>
        </view>
      </view>
      <view class="form-item">
        <view class="label">商品总价：</view>
        <view class="inputValue">
          <input type="number" v-model="formData.totalprice" />
        </view>
      </view>

      <!-- 发件人 -->
      <view class="form-item">
        <view class="label">发件人姓名：</view>
        <view class="inputValue">
          <input type="text" v-model="formData.flinkman" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">发件人电话：</view>
        <view class="inputValue">
          <input type="text" v-model="formData.ftel" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">发件人地址：</view>
        <view class="inputValue">
          <input
            type="text"
            v-model="formData.faddress"
            class="longInputClass"
          />
        </view>
      </view>
      <!-- 收件人 -->
      <view class="form-item">
        <view class="label">收货人姓名：</view>
        <view class="inputValue">
          <input type="text" v-model="formData.linkman" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">收货人电话：</view>
        <view class="inputValue">
          <input type="text" v-model="formData.tel" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">收货地址：</view>
        <view class="inputValue">
          <input
            type="text"
            v-model="formData.address"
            class="longInputClass"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="label">配送方式：</view>
        <view class="inputValue">
          <input type="text" v-model="formData.freight" />
        </view>
      </view>
      <view class="form-item">
        <view class="label">配送费：</view>
        <view class="inputValue">
          <input type="number" v-model="formData.freightprice" />
        </view>
      </view>
    </view>
    <view class="save" @click="saveClick">
      <text>确定录入</text>
    </view>
    <uni-popup ref="popup" type="center" background-color="#fff">
      <view class="popup-content">
        <scroll-view class="list" scroll-y>
          <uni-table v-if="isShow" border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th width="50" align="center">ID</uni-th>
              <uni-th width="150" align="center">商品信息</uni-th>
              <uni-th width="80" align="left">状态</uni-th>
              <uni-th width="80" align="left">操作</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, index) in tableData">
              <uni-td>{{ item.id }}</uni-td>
              <uni-td class="info">
                <image class="img" :src="item.pic" mode="scaleToFill" />
                <text>{{ item.name }}</text>
              </uni-td>

              <uni-td>{{ item.status == 1 ? "已上架" : "未上架" }}</uni-td>
              <uni-td>
                <button class="btn" @click="chooseClick(item)" type="params">
                  选择
                </button>
              </uni-td>
            </uni-tr>
          </uni-table>
          <uni-table
            class="table"
            v-else
            border
            stripe
            emptyText="暂无更多数据"
          >
            <!-- 表头行 -->
            <uni-tr>
              <uni-th width="150" align="center">规格</uni-th>
              <uni-th width="80">库存</uni-th>
              <uni-th width="100" align="left">销售价</uni-th>
              <uni-th width="100" align="left">购买数量</uni-th>
              <uni-th width="80" align="left">操作</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, index) in tableData2">
              <uni-td>{{ guigename }}</uni-td>

              <uni-td style="text-align: center">{{ item.stock }}</uni-td>
              <uni-td>{{ item.sell_price }}</uni-td>
              <uni-td>
                <input type="number" v-model="num" class="inputClass" />
              </uni-td>
              <uni-td>
                <view class="btn" @click="confirm(item)">确定</view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      guigename: "",
      formData: {
        mid: "",
        goodsprice: 0,
        linkman: "",
        tel: "",
        address: "",
        flinkman: "",
        ftel: "",
        faddress: "",
        freight: "商家配送",
        freightprice: 0,
        prodata: "", //商品id
        paytype: "线下支付",
        paytime: "",
        prodata: "",
        totalprice: "",
      },
      titleList: [
        {
          name: "ID",
        },
        {
          name: "商品信息",
        },
        {
          name: "创建时间",
        },
        {
          name: "状态",
        },
        {
          name: "操作",
        },
      ],
      isShow: true,
      tableData: [],
      tableData2: [],
      num: 0,
      goodImgData: {},
    };
  },
  onLoad(options) {
    this.getId();
  },
  methods: {
    confirm(item) {
      this.formData.totalprice = item.market_price * this.num;
      this.formData.goodsprice = item.market_price * this.num;
      this.$refs.popup.close();
    },

    getId() {
      const { id } = uni.getStorageSync("user");
      this.formData.mid = id;
    },
    handlerChooseClick() {
      console.log(app.globalData.pre_url);
      this.$refs.popup.open();
      app.get("ApiAdminFinance/getsplist", {}, (customs) => {
        console.log(customs, "customs");
        this.tableData = customs.data;
        console.log(customs.data, "data");
      });
    },
    searchClick() {},
    saveClick() {
      this.formData.paytime = Date.now();
      this.formData.prodata =
        this.goodImgData.id + "," + this.goodImgData.id + "," + this.num;

      console.log(" ", this.formData);

      app.post(
        "ApiAdminFinance/save",
        {
          ...this.formData,
        },
        (res) => {
          console.log(res);
          if (res.status == 0) {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true,
            });
            return;
          }
          setTimeout(() => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true,
            });
            uni.navigateTo({ url: "/admin/index/index" });
          }, 150);
        }
      );
    },
    chooseClick(item) {
      const { id } = item;

      this.goodImgData = item;
      this.isShow = false;
      app.post(
        "ApiAdminFinance/getproduct",
        {
          proid: id,
        },
        (customs) => {
          this.tableData2 = customs.gglist;
          this.guigename = customs.guigedata[0].items[0].title;
          console.log(customs, "customs");
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.entering-container {
  padding: 20rpx;
  box-sizing: border-box;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    border-bottom: 2rpx solid #f1f1f1;
    padding: 20rpx;
    box-sizing: border-box;
  }
  .content {
    .form-item {
      display: flex;
      // justify-content: flex-end;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      .label {
        font-size: 26rpx;
        font-weight: 400;
        width: 160rpx;
      }
      .inputValue {
        display: flex;
        image {
          width: 100rpx;
          height: 100rpx;
        }

        input {
          border: 1rpx solid #e4e4e4;
          height: 60rpx;
          padding: 10rpx;
          box-sizing: border-box;
          width: 280rpx;
          font-size: 20rpx;
          margin-right: 20rpx;
        }

        .longInputClass {
          width: 400rpx;
        }
        .btn {
          font-size: 26rpx;
          font-weight: 400;
          border: 1rpx solid #e4e4e4;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10rpx;
          box-sizing: border-box;
        }
      }
    }
  }
  .save {
    width: 400rpx;
    height: 80rpx;
    font-size: 26rpx;
    color: #fff;
    background-color: #334ed1;
    border-radius: 60rpx;
    text-align: center;
    margin: 50rpx auto;
    line-height: 80rpx;
  }
  .popup-content {
    background-color: #fff;
    // width: 600rpx;
    border-radius: 30rpx;

    .search {
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      input {
        border-radius: 20rpx;
        height: 60rpx;
        box-sizing: border-box;
        padding: 10rpx;
        border: 1rpx solid #e4e4e4;
      }
      display: flex;
      .name {
        font-size: 28rpx;
        margin-left: 20rpx;
      }
    }
    .list {
      width: 700rpx;
      height: 900rpx;
      padding: 30rpx 0;
      box-sizing: border-box;

      .inputClass {
        display: flex;
        width: 80rpx;
        border: 1rpx solid #e4e4e4;
      }

      .img {
        width: 100rpx;
        height: 100rpx;
      }
      .info {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btn {
        padding: 8rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        border: 1rpx solid #ccc;
        border-radius: 10rpx;
        text-align: center;
      }
      .table {
        height: 100%;
      }
    }
  }
}
</style>
